import React from 'react';
import { Package, Clock } from 'lucide-react';
import { DeliveryRecord } from '../../types';

interface DeliveryRecordsProps {
  records: DeliveryRecord[];
}

export function DeliveryRecords({ records }: DeliveryRecordsProps) {
  const recentRecords = records.slice(0, 5); // 显示最近5条记录

  return (
    <div className="bg-white p-4 rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">最近交付记录</h2>
      <div className="space-y-3">
        {recentRecords.length === 0 ? (
          <p className="text-gray-500 text-center py-4">暂无交付记录</p>
        ) : (
          recentRecords.map((record) => (
            <div
              key={record.orderNumber}
              className="flex items-center justify-between p-3 bg-gray-50 rounded-md"
            >
              <div className="flex items-center gap-3">
                <Package className="text-blue-500" size={20} />
                <div>
                  <p className="font-medium">订单 #{record.orderNumber}</p>
                  <div className="flex items-center gap-1 text-sm text-gray-500">
                    <Clock size={14} />
                    {record.deliveryDate.toLocaleString()}
                  </div>
                </div>
              </div>
              <div className="text-right">
                <p className="text-sm text-gray-600">
                  机器人 #{record.serialNumber}
                </p>
                <p className="text-sm text-gray-600">
                  窗口 #{record.window}
                </p>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}